<template>
    <div class="login">
        <el-container class="login-container">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm">
            <el-form-item label="用户" prop="user">
                <el-input v-model="ruleForm.user" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button style="margin-top: 10px; margin-left: 70px;" type="primary" @click="submitForm('ruleForm')">登陆</el-button>
                {{ message }}
            </el-form-item>
            </el-form>
        </el-container>
    </div>
</template>

<script>
  export default {
    data () {
      var validateUser = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'))
        } else {
          callback()
        }
      }
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          callback()
        }
      }
      return {
        ruleForm: {
          user: '',
          pass: ''
        },
        rules: {
          user: [
            { validator: validateUser, trigger: 'blur' }
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ]
        },
        message: ''
      }
    },
    methods: {
      submitForm (formName) {
        this.$router.push({path: '/home'})
        console.log('login ' + this.ruleForm.user)
        sessionStorage.setItem('username', this.ruleForm.user)
      }
    }
  }
</script>

<style>
.login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 150px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
</style>
